{% extends 'company/m/base.html' %}
{% load static %}
{% block main-head %}
    <script type="text/javascript" src="{% static 'm/script/mmen.js' %}" data-main="baseMain"></script>
    <script src="{% static 'js/ajax.js' %}"></script>
    <script src="{% static 'js/layer.js' %}"></script>
    <script src="{% static 'js/apply.js' %}"></script>
{% endblock %}
{% block title %}
    免费领取
{% endblock %}
{% block body %}
    <body>
    <div id="bodymask"></div>
    <div id="sitecontent" style="overflow:hidden;">
        {% include 'company/m/header.html' %}


        <script>

            // form

            var MOFORM = (function () {


                $.fn.extend({


                    tabActive2: function (config) {

                        let evTarget, box,

                            initConfig = {

                                target: '',

                                box: '',

                                className: 'active',

                                initFn: function () {
                                },

                                inFn: function () {
                                },

                                outFn: function () {
                                },

                                tabFn: function () {
                                },

                                type: 1

                            };


                        config = $.extend(initConfig, config);


                        evTarget = config.target ? $(this).closest(config.target) : $(this);

                        if (!config.box) {

                            config.type = 'single';

                        } else {

                            box = evTarget.closest(config.box);

                        }

                        config.initFn();


                        switch (initConfig.type) {

                            // 1 -- 点击可以再次取消，但是一次只能点击一个

                            case 1:


                                if (evTarget.hasClass(config.className)) {


                                    evTarget.removeClass(config.className);

                                    config.outFn.call(evTarget, evTarget);

                                } else {


                                    let currentEl = box.find(config.target + '.' + config.className);


                                    currentEl.removeClass(config.className);

                                    config.outFn.call(currentEl, currentEl);


                                    evTarget.addClass(config.className);

                                    config.inFn.call(evTarget, evTarget);

                                }

                                break;



                            // 2 -- 至少选中一个

                            case 2:


                                if (evTarget.hasClass(config.className)) {


                                    config.inFn.call(evTarget, evTarget);

                                    return;

                                } else {

                                    let currentEl = box.find(config.target + '.' + config.className);


                                    config.outFn.call(currentEl, currentEl);

                                    currentEl.removeClass(config.className);


                                    evTarget.addClass(config.className);

                                    config.inFn.call(evTarget, evTarget);

                                }

                                break;



                            // 可以多选

                            case 3:


                                if (evTarget.hasClass(config.className)) {

                                    evTarget.removeClass(config.className);

                                    config.outFn.call(evTarget, evTarget);

                                } else {

                                    evTarget.addClass(config.className);

                                    config.inFn.call(evTarget, evTarget);

                                }

                                break;


                            case 'single':


                                if (evTarget.hasClass(config.className)) {


                                    evTarget.removeClass(config.className);

                                    config.outFn.call(evTarget, evTarget);

                                } else {


                                    evTarget.addClass(config.className);

                                    config.inFn.call(evTarget, evTarget);

                                }

                                break;


                            default:

                                break;

                        }


                        config.tabFn.call(evTarget);

                    }

                });

                $.extend({

                    /**

                     * 获取元素能够存放的位置

                     * @param {DOMString} reldom 以这个元素为基础，进行判断

                     * @param {DOMString} box 以这个元素为容器，进行判断

                     * @param {String} priorotu 优先方向

                     */

                    freeZone: function (reldom, box, priority) {

                        let domInfor = $(this)[0].getBoundingClientRect(),

                            reldomInfor = $(reldom)[0].getBoundingClientRect(),

                            boxInfor = $(box)[0].getBoundingClientRect(),

                            freeInfor, styleInfor;


                        freeInfor = {

                            top: reldomInfor.top - boxInfor.top > domInfor.height,

                            bottom: boxInfor.bottom - reldomInfor.bottom > domInfor.height,

                            left: reldomInfor.left - boxInfor.left > domInfor.width,

                            right: boxInfor.right - reldomInfor.right > domInfor.width,

                        };


                        styleInfor = {

                            top: {

                                position: absolute,

                                top: auto,

                                right: auto,

                                left: 0,

                                bottom: '100%'

                            }

                        }


                        if (freeInfor[priority]) {

                            return {

                                first: priority,

                                infor: freeInfor

                            };

                        }


                        for (const key in freeInfor) {

                            if (freeInfor.hasOwnProperty(key)) {

                                const infor = freeInfor[key];

                                if (infor) {

                                    return {

                                        first: key,

                                        infor: freeInfor

                                    };

                                }

                            }

                        }

                    }

                });

                var MOFORM = function (el, option) {

                    this.dom = $(el);

                    this.dom.data('mofrom', this);

                    this.option = option;

                };


                MOFORM.prototype = {

                    constructor: MOFORM,

                    initForm: function () {

                        this.initCheckBox();

                        this.initRadio();

                        this.initSelectInput();

                        return this;

                    },

                    initCheckBox: function (el) {

                        var checkBoxs = el ? $(el) : this.dom.find('.mo-checkbox-wrap');

                        $(checkBoxs).each(function (i, e) {

                            $(e).on('click.checkbox', '.mo-checkbox', function (ev) {

                                var checkboxWrap = ev.delegateTarget;


                                $(this).tabActive2({

                                    className: 'checked',

                                    box: checkboxWrap,

                                    type: 3,

                                    inFn: function (target) {

                                        target.find('input[type="checkbox"]').prop(
                                            'checked', true)

                                    },

                                    outFn: function (target) {

                                        target.find('input[type="checkbox"]').prop(
                                            'checked', false)

                                    }

                                });

                            })

                        });

                    },

                    initRadio: function (el) {

                        var radioBoxs = el ? $(el) : this.dom.find('.mo-radio-wrap');

                        $(radioBoxs).each(function (i, e) {

                            $(e).find('.mo-radio').eq(0).addClass('checked').find('input[type="radio"]').prop("checked", true)


                            $(e).on('click.radio', '.mo-radio', function (ev) {

                                var radioWrap = ev.delegateTarget;


                                $(this).tabActive2({

                                    className: 'checked',

                                    box: radioWrap,

                                    type: 2,

                                    inFn: function (target) {

                                        // console.log(target.find('input[type="radio"]'));

                                        target.find('input[type="radio"]').prop("checked", true);

                                    }

                                });

                            })

                        });

                    },

                    initSelectInput: function (el) {

                        var _self = this,

                            selectInputBoxs = el ? $(el) : this.dom.find('.mo-select-wrap');


                        $(selectInputBoxs).each(function (i, e) {

                            var selectInpt = $(e).find('select'),

                                fakeSelect;

                            // console.log($('.agent-mobile'));

                            if ($('.agent-mobile').length) {


                                selectInpt.css({

                                    display: 'block',

                                    position: 'absolute',

                                    top: 0,

                                    width: '100%',

                                    height: '100%',

                                    opacity: 0

                                });

                                selectInpt.on('change', function () {

                                    // console.log('change', $(this).value);

                                    $(this).closest('.mo-select')

                                        .find('.mo-option-selected')

                                        .text($(this).children('option:selected').val());

                                })

                            } else {


                                selectInpt.hide();

                            }

                            fakeSelect = _self.setSelectInputDom(selectInpt);


                            $(fakeSelect).insertBefore(selectInpt);

                        });

                    },

                    getSelectInputInfor: function (el) {


                        var result = {},

                            options = $(el).find('option'),

                            optionTexts = $.map(options, function (e, i) {

                                return $(e).text();

                            }),


                            selectOption = options.filter(':selected');


                        result.optionTexts = optionTexts;

                        result.selectOption = selectOption;

                        return result;

                    },

                    setSelectInputDom: function (el) {

                        var _self = this,

                            options = $(el).find('option'),

                            fakeSelect,

                            _fakeSelect,

                            optionTexts;


                        _fakeSelect = '<div class="mo-fakeSelect">';

                        _fakeSelect += '<div class="mo-option-selected">';

                        _fakeSelect += options.filter(':selected').text();

                        _fakeSelect += '</div>';

                        _fakeSelect += '<div class="mo-fakeoptions"></div>';

                        _fakeSelect += '</div>';


                        fakeSelect = $(_fakeSelect);


                        optionTexts = $.map(options, function (e, i) {

                            var text = $(e).text(),

                                fakeoption;


                            fakeoption = $('<span class="mo-fakeoption">' + text + '</span>')

                                .data('realOption', e)

                                .data('realSelect', el);


                            $(e).data('fakeOption', fakeoption)

                                .data('fakeSelect', fakeSelect);


                            fakeoption.appendTo(fakeSelect.find('.mo-fakeoptions'));

                            return text;

                        });


                        fakeSelect.on('click.select', '.mo-fakeoption', function (ev) {

                            var selectWrap = ev.delegateTarget;

                            var fakeSelect = $(this).closest(".mo-fakeSelect");

                            var realOption = $(this).data('realOption');

                            $(realOption).prop('selected', true).siblings('option').prop('selected',

                                false);

                            if (fakeSelect.find('.mo-fakeoptions:visible')[0]) {


                                fakeSelect.find('.mo-fakeoptions').slideUp();

                            }

                            _self.selectChange(el)

                            return false;

                        });

                        fakeSelect.on('click.onOff', '.mo-option-selected', function () {

                            var fakeSelect = $(this).closest(".mo-fakeSelect");

                            if (fakeSelect.find('.mo-fakeoptions:visible')[0]) {


                                fakeSelect.find('.mo-fakeoptions').slideUp();

                            } else {

                                if ($(".mo-fakeoptions").height() + ($(".mo-fakeSelect").offset().top -

                                    $('body').scrollTop()) >=

                                    ($(window).height() - 58)) {

                                    $(".mo-fakeSelect").attr("data-optionpos", "top");

                                } else {

                                    $(".mo-fakeSelect").attr("data-optionpos", "bottom");

                                }

                                fakeSelect.find('.mo-fakeoptions').slideDown();

                            }
                            ;


                            $('body').off('click.closeSelect').on('click.closeSelect', function () {

                                fakeSelect.find('.mo-fakeoptions').slideUp();

                            });

                            return false;

                        });


                        return fakeSelect;

                    },

                    selectChange: function (el) {

                        var selectOption = $(el).find('option:selected');

                        fakeSelect = selectOption.data('fakeSelect');


                        $(fakeSelect).find('.mo-option-selected').text(selectOption.text());

                    }

                };


                // 依赖 MOFORM

                var MOFORMC = {

                    rightEv: function () {
                    },

                    endCheck: function (allOk) {

                        if (allOk) {

                            this.rightEv();

                        } else {


                        }

                    },

                    initCheckRule: function (rulesInfor) {

                        var _self = this;


                        $.each(rulesInfor, function (i, v) {

                            var rules = v.rules,

                                checkInput = _self.dom.find('input[data-rules="' + v.identifier + '"]');

                            if (typeof checkInput == 'undefined' || checkInput.length == 0) return;


                            $(checkInput).each(function (j, e) {


                                var _input = e,

                                    isOk, errorPrompt;

                                $(e).on('blur.check', function () {


                                    $.each(rules, function (k, r) {

                                        isOk = _self.inputRunCheck(_input, r);

                                        if (isOk && $(_input).attr('data-notempty') == 1) {

                                            isOk = _self.inputRunCheck(_input, {

                                                rule: 'notempty',

                                                prompt: '该项不能为空'

                                            });

                                        }

                                        if (isOk) {


                                        } else {


                                            errorPrompt = v.prompt;

                                            return false;

                                        }


                                    });

                                    _self.setInputMes(_input, errorPrompt, isOk);

                                })

                            });

                        });

                        this.rulesInfor = rulesInfor;

                    },

                    inputRunCheck: function (dom, ruleInfor) {

                        return this.inputCheckMethod[ruleInfor.rule](dom, ruleInfor);

                    },

                    inputCheckMethod: {

                        regExpMethods: {

                            email: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,

                            number: /^$|^(\-|\+)?[0-9]+(\.[0-9]+)?$/,

                            text: /^$|^\S+$/,

                            // text: /^$|^[\u4E00-\u9FA5A-Za-z]+$/,

                            notempty: /\S/,

                            numcode: /^[0-9]{4}$/

                        },

                        regExps: function (input, infor) {


                            var checkType = infor.rule,

                                val = $(input).val().trim(),

                                formItem = $(input).closest('.mo-input-item'),

                                tipBox = formItem.find('.mo-input-tip'),

                                isOk = true;


                            if ((this.regExpMethods[checkType].test(val))) {


                                if (formItem.hasClass('error')) {


                                    formItem.removeClass('error').attr('data-' + checkType + '', 'true');

                                    tipBox.text('');

                                }

                                isOk = true;

                            } else {

                                // console.log(this.regExpMethods[checkType], val, this.regExpMethods[checkType].test(val));


                                formItem.addClass('error').attr('data-' + checkType + '', 'false');

                                tipBox.text(infor.prompt);

                                isOk = false;

                            }

                            return isOk;

                        },

                        notempty: function (input, infor) {

                            // console.log($(input).val());

                            return this.regExps(input, infor)

                        },

                        number: function (input, infor) {


                            return this.regExps(input, infor)

                        },

                        email: function (input, infor) {


                            return this.regExps(input, infor)

                        },

                        text: function (input, infor) {


                            return this.regExps(input, infor)

                        },

                        numcode: function (input, infor) {


                            return this.regExps(input, infor)

                        }

                    },

                    runCheck: function (rightEv, errorEv) {

                        var _self = this,

                            allOk = true,

                            fistError;

                        $.each(this.rulesInfor, function (i, v) {

                            var rules = v.rules,

                                checkInput = _self.dom.find('input[data-rules="' + v.identifier + '"]');

                            if (typeof checkInput == 'undefined' || checkInput.length == 0) return;


                            $(checkInput).each(function (j, e) {


                                var _input = e,

                                    isOk, errorPrompt;

                                $.each(rules, function (k, r) {

                                    isOk = _self.inputRunCheck(_input, r);

                                    if (isOk && $(_input).attr('data-notempty') == 1) {

                                        isOk = _self.inputRunCheck(_input, {

                                            rule: 'notempty',

                                            prompt: '该项不能为空'

                                        });

                                    }

                                    if (isOk) {


                                    } else {


                                        errorPrompt = v.prompt;

                                        if (allOk) {

                                            allOk = false;

                                            fistError = v

                                        }

                                        return false;

                                    }


                                });

                                _self.setInputMes(_input, errorPrompt, isOk);

                            });

                            _self.endCheck(allOk);

                        });

                        if (allOk) {

                            rightEv && rightEv()

                        } else {

                            errorEv && errorEv()

                        }

                    },

                    setInputMes(input, errorPrompt, isOk) {

                        if (isOk) {


                        } else {
                        }

                    }

                };


                $.extend(true, MOFORM.prototype, MOFORMC);


                return MOFORM;

            })();


            function setCodeImg() {

                $('#codeImg').attr('src', function () {

                    return $(this).data('src') + '?' + (+new Date());

                }).show();

            }

            $(function () {

                var moForm = new MOFORM('.mo-form').initForm(),

                    formTip = $('#formTip'),

                    formmask;


                moForm.initCheckRule([{

                    identifier: 'email',

                    rules: [{

                        rule: 'email',

                        prompt: '请输入邮箱'

                    }],

                }, {

                    identifier: 'string',

                    rules: [{

                        rule: 'text',

                        prompt: '此项不能为数字、以及非法字符'

                    }]

                }, {

                    identifier: 'number',

                    rules: [{

                        rule: 'number',

                        prompt: '请输入数字'

                    }]

                }, {

                    identifier: 'numcode',

                    rules: [{

                        rule: 'numcode',

                        prompt: '请输入正确的验证码'

                    }]

                }]);




            })

        </script>

        <style>

            input[type="checkbox"],
            input[type="radio"] {

                display: none;

            }

            .formPage .container_header .subtitle,
            .formPage .container_header .title {

                text-align: center;

            }

            .agent-mobile .npagePage.formPage .container_header .title {

                margin-bottom: 10px;

            }

            .formPage .postbody {

                margin-bottom: 10px;

            }

            .formPage .postbody.editorDes {

                font-size: 16px;

                line-height: 26px;

            }


            input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

                color: #acacac;

            }

            input:-moz-placeholder, textarea:-moz-placeholder {

                color: #acacac;

            }

            input:-ms-input-placeholder, textarea:-ms-input-placeholder {

                color: #acacac;

            }


            .mo-form-list {

                max-width: 700px;

                padding: 0 0 20px 0;

                margin: 0 auto;

            }


            .mo-input-item:after {

                content: "";

                display: block;

                clear: both;

            }


            .mo-input-item.error input::-webkit-input-placeholder, .mo-input-item.error textarea::-webkit-input-placeholder,
            .mo-input-item.error input::-moz-placeholder, .mo-input-item.error textarea::-moz-placeholder,
            .mo-input-item.error input:-moz-placeholder, .mo-input-item.error textarea:-moz-placeholder,
            .mo-input-item.error input:-ms-input-placeholder, .mo-input-item.error textarea:-ms-input-placeholder {

                color: #9f3a38;

            }

            .mo-input-item.error input {

                background: #fff6f6;

                border-color: #e0b4b4;

                border-radius: '';

                box-shadow: none;

            }


            .mo-input-items {

                width: 100%;

                position: relative;

                padding: 8px 0;

            }


            .mo-input-title {

                position: relative;

                line-height: 34px;

                font-size: 15px;

                color: #60676b;

                min-height: 34px;

                white-space: nowrap;

                overflow: hidden;

                text-overflow: ellipsis;

                box-sizing: border-box

            }


            .mo-input-wrap {

                box-sizing: border-box;

            }


            .mo-button-wrap.mo-input-wrap {
                text-align: center;
            }


            ._mo_requiredInput .mo-input-title:after {

                content: "*";

                color: red;

                padding-left: 4px;

            }


            .mo-input-tip {

                font-size: 14px;

                line-height: 16px;

                padding-top: 6px;

            }

            .mo-input-tip.mo-errorMes {


                color: #ff5151;

            }

            .mo-type-text .mo-input-title {

                line-height: 40px;

                box-sizing: border-box;

            }

            .mo-text-wrap {

                -webkit-box-sizing: border-box;

                box-sizing: border-box;

            }

            .mo-text.mo-code input {

                width: 128px;

                margin-bottom: 10px;

            }


            .mo-text.mo-code img {

                vertical-align: -11px;

                margin-left: 10px;

                display: none;

                cursor: pointer;

            }

            .mo-text.mo-code .icon {


            }

            .mo-text input {

                width: 100%;

                -webkit-box-sizing: border-box;

                box-sizing: border-box;

                font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;

                margin: 0;

                outline: 0;

                tap-highlight-color: rgba(255, 255, 255, 0);

                line-height: 1.21428571em;

                padding: .67857143em 1em;

                font-size: 1.25em;

                background: #fff;

                border: 1px solid rgba(34, 36, 38, .15);

                color: rgba(0, 0, 0, .87);

                border-radius: .28571429rem;

                -webkit-box-shadow: 0 0 0 0 transparent inset;

                box-shadow: 0 0 0 0 transparent inset;

                -webkit-transition: color .1s ease, border-color .1s ease, outline .36s ease;

                transition: color .1s ease, border-color .1s ease, outline .36s ease;

            }


            .mo-checkbox-wrap {

                vertical-align: middle;

                line-height: 34px;

                -webkit-box-sizing: border-box;

                box-sizing: border-box;

            }


            .mo-checkbox {

                display: inline-block;

                margin-right: 10px;

            }


            .mo-checkbox .mo-inputName {

                padding-left: 1.85714em;

                color: #60676b;

                -webkit-transition: color .1s ease;

                transition: color .1s ease;

                cursor: auto;

                position: relative;

                display: block;

                outline: 0;

                font-size: 14px;

                line-height: 16px;

                cursor: pointer;

            }


            .mo-checkbox .mo-inputName:after {

                content: "";

                position: absolute;

                top: 0;

                left: 0;

                width: 14px;

                height: 14px;

                border: 1px solid rgba(34, 36, 38, .15);

                border-radius: .28571429rem;

            }


            .mo-checkbox.checked .mo-inputName:before {

                content: "\f00c";

                font: normal normal normal 14px/1 FontAwesome;

                position: absolute;

                top: 0;

                left: 0;

                margin: 1px 0 0 1px;

                z-index: 3;

            }


            .mo-radio-wrap {

                display: inline-block;

                padding-top: 8px;

            }


            .mo-radio {

                display: inline-block;

                margin-right: 10px;

            }


            .mo-radio .mo-inputName {

                padding-left: 1.85714em;

                color: #60676b;

                -webkit-transition: color .1s ease;

                transition: color .1s ease;

                cursor: auto;

                position: relative;

                display: block;

                outline: 0;

                font-size: 14px;

                line-height: 16px;

                cursor: pointer;

                display: inline-block;

                margin-bottom: 10px;

            }


            .mo-radio .mo-inputName:after {

                content: "";

                position: absolute;

                top: 0;

                left: 0;

                width: 14px;

                height: 14px;

                border: 1px solid rgba(34, 36, 38, .15);

                border-radius: 50%;

            }


            .mo-radio.checked .mo-inputName:before {

                content: "";

                font: normal normal normal 16px/1 FontAwesome;

                position: absolute;

                width: 6px;

                height: 6px;

                background: #60676b;

                border-radius: 50%;

                top: 5px;

                left: 5px;

                z-index: 3;

            }


            .mo-select-wrap {

                vertical-align: middle;

                line-height: 34px;
                position: relative;


            }


            .mo-select-wrap select {

                display: none;

            }


            .mo-select {

                position: relative;

            }


            .mo-fakeSelect {

                position: relative;

                width: 100%;

                -webkit-box-sizing: border-box;

                box-sizing: border-box;

                border: 1px solid rgba(34, 36, 38, .15);

                border-radius: .28571429rem;

            }


            .mo-option-selected {

                position: relative;

                padding-left: 10px;

                -webkit-box-sizing: border-box;

                box-sizing: border-box;

                cursor: pointer;

            }


            .mo-option-selected:after {

                content: "\f078";

                font: normal normal normal 14px/1 FontAwesome;

                font-size: inherit;

                line-height: 30px;

                text-rendering: auto;

                position: absolute;

                right: 10px;

                top: 0;

            }


            .mo-fakeoptions {

                display: none;

                width: 100%;

                border: 1px solid rgba(34, 36, 38, .15);

                background: #fff;

                cursor: pointer;

                box-sizing: border-box;

                z-index: 20;

            }


            .mo-fakeoption {

                border-bottom: 1px solid rgba(34, 36, 38, .15);

                padding-left: 10px;

                -webkit-box-sizing: border-box;

                box-sizing: border-box;

                -webkit-transition: all .1s ease;

                transition: all .1s ease;

                display: block;

            }


            .mo-textarea-wrap {

                vertical-align: middle;

                line-height: 34px;

            }


            .mo-textarea textarea {

                width: 100%;

                min-height: 200px;

                margin: 0;

                tap-highlight-color: rgba(255, 255, 255, 0);

                padding: .78571429em 1em;

                border: 1px solid rgba(34, 36, 38, .15);

                outline: 0;

                color: rgba(0, 0, 0, .87);

                border-radius: .28571429rem;

                -webkit-transition: color .1s ease, border-color .1s ease;

                transition: color .1s ease, border-color .1s ease;

                font-size: 1.25em;

                line-height: 1.2857;

                -webkit-box-sizing: border-box;

                box-sizing: border-box;

            }


            .mo-button input {

                border: 1px solid;

                width: 80%;

                line-height: 34px;

                font-size: 14px;

                background: #ede9e9;

                border-radius: 2px;

                border-color: #ccc;

                cursor: pointer;

                color: #888;

                transition: 0.36s ease;

                vertical-align: middle;

            }


            .mo-button input:hover {

                background: #f9f3f3;

                border-color: #d9d9d9;

            }


            .mo-fakeSelect[data-optionpos="top"] .mo-fakeoptions {

                position: absolute;

                bottom: 100%;

            }


            .mo-fakeSelect[data-optionpos="bottom"] .mo-fakeoptions {

                position: absolute;

                top: 100%;

            }


            #formmask {

                position: fixed;

                top: 0;

                left: 0;

                z-index: 999;

                background: rgba(198, 198, 198, 0.27);

                bottom: 0;

                right: 0;

            }

            .formMesBox {

                position: absolute;

                width: 300px;

                height: 100px;

                background: rebeccapurple;

                left: 50%;

                top: 50%;

                transform: translate(-50%, -90%);

            }


            .formTip {

                font-size: 14px;

                line-height: 36px;

                vertical-align: middle;

                text-align: left;

                width: 80%;

                margin: 0 auto;

            }

            .formTip .icon {

                display: none;

                font-size: 20px;

                text-align: center;

                margin: 0 10px;

            }


            .formTip .mes {

                line-height: 36px;

                display: inline-block;

                vertical-align: 2px;

            }

            .formTip.loading .icon {

                display: inline-block;

                animation: fa-spin 2s infinite linear;

            }

            .formTip.loading .icon:before {

            }

            .formTip.suc .icon {

                display: inline-block;


            }

            .formTip.suc .icon:before {

                content: "\f058";

                color: #1d9d74;

            }

            .formTip.error .icon {

                display: inline-block;

                color: #ff5151;

            }

            .formTip.error .mes {

                color: #ff5151;

            }

            .formTip.error .icon:before {

                content: "\f057";

                color: #ff5151;

                display: inline-block;

            }

            #codeImg {

                display: inline-block !important;

                width: 120px;

            }

            .mo-text.mo-code {

                text-align: left;

            }


            .theme-b .formPage .mo-input-title {

                color: #8a8a8a;

            }


            .theme-b .mo-radio.checked .mo-inputName:before {

                background: rgb(172, 172, 172);

            }

            .theme-b .mo-checkbox.checked .mo-inputName:before {

                color: rgb(172, 172, 172);

            }

            .theme-b .formPage .mo-textarea textarea {

                background: #313131;

                border: 1px solid rgba(121, 121, 121, .29);

                color: rgba(125, 125, 125, .87)

            }


            .theme-b .formPage .mo-button input {


                border: 1px solid rgba(115, 115, 115, .21);

                background: #313131;

            }


            .theme-b .formPage .mo-button input:hover {

                background: #474747;

                color: #bababa;

            }


            .theme-b .formPage .mo-fakeoption {
            }


            .theme-b .formPage .mo-text input {

                border: 1px solid rgba(115, 115, 115, .21);

                background: #313131;

                color: rgb(172, 172, 172);

            }


            .theme-b .formPage .mo-fakeoptions {

                background: #313131;

                border: 1px solid rgba(115, 115, 115, .21);

            }


            .theme-b .formPage .mo-fakeoption {

                transition: 0.36s ease;

                border-color: rgba(115, 115, 115, .21);

            }


            .theme-b .formPage .mo-fakeoption:hover {

                background: #474747;

                color: #bababa;

            }


            .theme-b .formPage .mo-fakeSelect {

                background: #313131;

                border: 1px solid rgba(115, 115, 115, .21);

            }


            .theme-b .formPage .mo-radio .mo-inputName:after {

                border: 1px solid rgba(115, 115, 115, .21);

                background: #313131;

            }


            .theme-b .formPage .mo-checkbox .mo-inputName:after {

                background: #313131;

                border: 1px solid rgba(115, 115, 115, .21);

            }

            .theme-b .mo-option-selected {

                background: #313131;

            }

        </style>

        <div class="npagePage pageEditor formPage">

            <div class="content">

                <div class="mFormPage module">

                    <div class="module_container">

                        <div class="container_header wow">

                            <p class="title">免费学</p>


                            <p class="subtitle">每期试听名额有限，预先申请试听可优先享有占座特权</p>


                        </div>

                        <div class="container_content">

                            <div class="content_wrapper">

                                <div class="postbody"></div>

                            </div>

                        </div>

                        <div class="formInputList">

                            <form class="mo-form" id="pageForm">

{#                                <input type="hidden" name="pageid" value="157304">#}

                                <ul class="mo-form-list">


                                    <li class="mo-form-item">

                                        <div class="mo-input-items">

                                            <div class="mo-input-item mo-type-text ">

                                                <div class="mo-input-title">姓名</div>

                                                <div class="mo-text-wrap mo-input-wrap">

                                                    <div class="mo-text">

                                                        <input type="text"

                                                               name="name"
                                                               maxlength="4"

                                                               data-rules="string"

                                                               data-notempty="0"

                                                               class="text"

                                                               placeholder="您的姓名">

                                                    </div>

                                                    <div class="mo-input-tip mo-errorMes">

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </li>


                                    <li class="mo-form-item">

                                        <div class="mo-input-items">

                                            <div class="mo-input-item mo-type-text  _mo_requiredInput">

                                                <div class="mo-input-title">联系方式</div>

                                                <div class="mo-text-wrap mo-input-wrap">

                                                    <div class="mo-text">

                                                        <input type="tel"

                                                               name="telephone"
                                                               maxlength="11"

                                                               data-rules="string"

                                                               data-notempty="1"

                                                               class="text"

                                                               placeholder="手机号码">

                                                    </div>

                                                    <div class="mo-input-tip mo-errorMes">

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </li>


                                    <li class="mo-form-item">

                                        <div class="mo-input-items">

                                            <div class="mo-input-item">

                                                <div class="mo-input-title">感兴趣的课程</div>

                                                <div class="mo-select-wrap mo-input-wrap">

                                                    <div class="mo-select">

                                                        <select name="gift">

                                                            {% for gift in gifts %}
                                                              <option value="{{ gift.name }}">{{ gift.name }}</option>
                                                            {% endfor %}

                                                        </select>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </li>


                                    <li class="mo-form-item">

                                        <div class="mo-input-items">

                                            <div class="mo-input-item">

                                                <div class="mo-input-title">宝宝年龄</div>

                                                <div class="mo-radio-wrap mo-input-wrap">



                                                    <div class="mo-radio">

                                                        <input type="radio" name="baby_age" value="1岁" id="">

                                                        <span class="mo-inputName">1岁</span>

                                                    </div>


                                                    <div class="mo-radio">

                                                        <input type="radio" name="baby_age" value="2岁" id="">

                                                        <span class="mo-inputName">2岁</span>

                                                    </div>


                                                    <div class="mo-radio">

                                                        <input type="radio" name="baby_age" value="3岁" id="">

                                                        <span class="mo-inputName">3岁</span>

                                                    </div>


                                                </div>

                                            </div>

                                        </div>

                                    </li>
                                    <li class="mo-form-item">

                                        <div class="mo-input-items">

                                            <div class="mo-input-item">

                                                <div class="mo-input-title">留言内容</div>

                                                <div class="mo-textarea-wrap mo-input-wrap">

                                                    <div class="mo-textarea">

                                                    <textarea name="message" id="" cols="30" rows="10"
                                                              placeholder=""></textarea>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </li>


                                    <li class="mo-form-item">
{% csrf_token %}
                                        <div class="mo-input-items">

                                            <div class="mo-input-item mo-type-text _mo_requiredInput">

                                                <div class="mo-input-title">验证码</div>

                                                <div class="mo-text-wrap mo-input-wrap">

                                                    <div class="mo-text mo-code">

                                                        <input type="text" name="img_captcha" data-rules="string"
                                                               placeholder="请输入验证码" autocomplete="off"
                                                               id="verification">

                                                        <img id="codeImg" class="img-captcha" data-src="{% url 'company:img_captcha' %}" src="{% url 'company:img_captcha' %}">

                                                    </div>

                                                    <div class="mo-input-tip mo-errorMes">

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </li>

                                    <li class="mo-form-item">

                                        <div class="mo-input-items">

                                            <div class="mo-input-item">

                                                <div class="mo-button-wrap mo-input-wrap">

                                                    <div id="mo-submit" class="mo-button">

                                                        <input type="button" id="submit" value="提交">

                                                        <div id="formTip" class="formTip">

                                                            <i class="icon fa fa-spinner" aria-hidden="true"></i>

                                                            <span class="mes"></span>

                                                        </div>

                                                    </div>

                                                </div>

                                            </div>

                                        </div>

                                    </li>

                                </ul>

                            </form>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        {% include 'company/m/footer.html' %}
{% include 'company/m/nav.html' %}

{% include 'company/m/online.html' %}
    </body>
{% endblock %}